<template>
  <div class="swiper-body-box bg-color-1">
    <!--左箭头-->
    <arrow arrow="left" color="white" :size="50" @click="arrowClick(0)"></arrow>
    <!--图片-->
    <div class="swiper-image-box cursor">
      <img class="swiper-image" :src="images[nowImage].src">
    </div>

    <!--下载客户端-->
    <div class="swiper-box">
      <img class="swiper-box-image" :src="require('../assets/logo.png')">
      <div class="swiper-box-text">
        vue云音乐
      </div>
      <button class="swiper-box-button cursor bg-color-2">下载客户端</button>
    </div>
    <!--右箭头-->
    <arrow :size="50" arrow="right" color="white" @click="arrowClick(1)"></arrow>
  </div>
</template>

<script>
import arrow from "../components/arrow";
export default {
  components:{arrow},
  name: "swiper",
  props: {
    images: Array,
    auto:{
      default:false,
      type:Boolean
    },
    autoTime:{
      default: 1000,
      type:Number
    }
  },
  data() {
    return {
      nowImage: 0,
      autoTimerObj:{}
    }
  },
  methods: {
    /*点击箭头时，根据箭头传来的tag改变nowImage的值*/
    arrowClick(tag) {
      if (tag == 0 && (this.nowImage - 1) >= 0) {
        this.nowImage--
      } else if (tag == 1 && (this.nowImage + 1) < this.images.length) {
        this.nowImage++
      }
    }
  },
  created() {
    if(this.auto){
      this.autoTimerObj = setInterval(()=>{
        if(this.nowImage+1 == this.images.length) this.nowImage = 0
        else this.nowImage++
      },this.autoTime)
    }
  },
  beforeDestroy() {
    if(this.autoTimerObj != {}){
      clearInterval(this.autoTimerObj)
      this.autoTimerObj = {}
    }
  }
}
</script>

<style scoped>
.swiper-body-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 350px;
  padding: 10px 10px 2px 10px;
}

.swiper-arrow {
  height: 50px;
  width: 50px;
}

.swiper-image-box {
  height: 100%;
  margin: 0 0 0 20px;
}

.swiper-image {
  height: 100%;
  width: auto;
}

.swiper-box {
  height: 100%;
  width: 400px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px rgb(50,73,93) solid;
}

.swiper-box-image {
  height: 40%;
  width: auto;
  margin-bottom: 5%;
}

.swiper-box-button {
  width: 70%;
  height: 15%;
  margin-top: 5%;
  color: white;
  border: none;
  font-size: 1.0em;
}

.swiper-box-text {
  font-size: 1.25em;
  font-weight: bold;
  color: rgb(255, 255, 255);
}
</style>